<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 注册</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <#include "/jsInclude.ftl">
</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div>
            <div>

                <h1 class="logo-name">H+</h1>

            </div>
            <h3>欢迎注册 H+</h3>
            <p>创建一个H+新账户</p>
            <form id="main_form" class="m-t" role="form" action="/register" method="post">
                <div class="form-group">
                    <input type="text" name="username" class="form-control" placeholder="请输入用户名" required="">
                </div>
                <div class="form-group">
                    <input id="password" type="password" name="password" class="form-control" placeholder="请输入密码" required="">
                </div>
                <div class="form-group">
                    <input type="password" name="repassword" class="form-control" placeholder="请再次输入密码" required="">
                </div>
                <div class="form-group text-left">
                    <div class="checkbox i-checks">
                        <label class="no-padding">
                            <input type="checkbox" name="checkbox"><i></i> 我同意注册协议</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b">注 册</button>

                <p class="text-muted text-center"><small>已经有账户了？</small><a href="/login">点此登录</a>
                </p>

            </form>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });

        $("#main_form").validate({
            onsubmit:true,// 是否在提交时验证
            onfocusout:false,// 是否在获取焦点时验证
            onkeyup :false,// 是否在敲击键盘时验证
            rules: {　　　　//规则
                username: {　　//要对应相对应的input中的name属性
                    required: true,
                    remote:"/user/check"
                },
                password: {　　//要对应相对应的input中的name属性
                    required: true
                },
                repassword: {
                    required: true,
                    equalTo:"#password"
                },
                checkbox:{
                    required:true
                }
            },
            messages:{　　　　//验证错误信息
                username: {　　//要对应相对应的input中的name属性
                    required: "请输入用户名",
                    remote:"用户名已存在"
                },
                password: {　　//要对应相对应的input中的name属性
                    required: "请输入密码"
                },
                repassword: {
                    required: "请再次入密码",
                    equalTo: "两次输入的密码不一致"
                },
                checkbox:{
                    required:"请选中"
                }
            },
            submitHandler: function(form) { //通过之后回调
                    //进行ajax传值
                $.ajax({
                    url:"/register",
                    type: "POST",
                    data:$("#main_form").serializeObject(),
                    success:function(result){
                        if(result.msg == 'success'){
                            top.location='/login';
                        } else {
                            layer.msg('注册失败');
                        }
                    }
                });
               alert($("#main_form").serializeObject());
               console.log($("#main_form").serializeObject());
            },
            invalidHandler: function(form, validator) {
                return false;
            }
        });

    </script>

</body>

</html>
